<%@ page contentType="text/html; charset=UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html LANG="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>搜索结果</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
<script src="scripts/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/bootstrap-paginator.js"></script>
<!--[if lt IE 9]>
  <script src="bootstrap/js/html5shiv.min.js"></script>
  <script src="bootstrap/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
	<nav class="navbar navbar-default" role="navigation">
	<div class="navbar-header">
		<a class="navbar-brand" href="index.html"><strong>卓越搜索</strong></a>
	</div>
	<div>
		<ul class="nav navbar-nav">
			<li class="active"><a href="index.html">主页</a></li>
			<li><a href="setting">设置</a></li>
			<li><a href="stat">搜索词</a></li>
		</ul>
	</div>
	</nav>
	<div style="padding: 0px 10px 10px;">
		<div class="container">
			<form class="bs-example bs-example-form" id="searchForm" role="form" action="search" method="post">
				<div class="row">
					<div class="col-lg-6">
						<div class="input-group">
							<input id="currentPage" name="currentPage" value="${currentPage}" type="text" style="display: none;" /> <span
								class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> <input id="queryWord"
								name="queryWord" value="${queryWord}" type="text" class="form-control" /> <span class="input-group-btn">
								<button class="btn btn-default" type="button" onclick="formSubmit('1');">文档搜索</button>
							</span>
						</div>
					</div>
				</div>
			</form>
			<br/>
			<div class="row">
				<div class="col-md-4">
	        		找到约${total}条结果
	      		</div>
	     	 	<div class="col-md-8">
	        		<i class="glyphicon glyphicon-eye-open"></i>&nbsp;<a href="#" class="active" data-toggle="modal" data-target="#myModal">搜索小诀窍</a>
	      		</div>
      		</div>
			<hr />
			<c:forEach var="result" items="${results}" varStatus="status">
				<div class="row">
					<span class="glyphicon glyphicon-download-alt"></span> <a href="javascript:download('${result.path}');"
						data-toggle="tooltip" title="${result.path}">${result.name}</a> <br /> ${result.content}
				</div>
				<c:if test="${(status.index + 1) ne results.size()}">
					<br />
				</c:if>
			</c:forEach>
			<c:if test="${0 eq results.size()}">
				<strong>抱歉，没有找到与"${queryWord}"相关的文档。</strong>
			</c:if>
			<hr />
			<c:if test="${0 ne results.size()}">
				<div>
					<ul id="pager"></ul>
				</div>
			</c:if>
		</div>
	</div>
	<p class="text-center"><i class="glyphicon glyphicon-copyright-mark"></i>&nbsp; 2015 Sunny Zhou</p>
	<br />
	<iframe id="downloadFrame" name="downloadFrame" style="display: none;" src=""></iframe>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">搜索小诀窍</h4>
				</div>
				<div class="modal-body">
					<div class="alert alert-info">
						<h5><i class="glyphicon glyphicon-eye-open"></i>&nbsp;搜索小诀窍</h5>
						<ul>
						  <li>精确查询，将搜索词用两个双引号封闭起来，如<code>"李青"</code></li>
						  <li>同时查询两个词，用AND符号拼接起来，如<code>李青 AND 一般现在时</code></li>
						  <li>查询两个词中任意一个词，用OR符号拼接起来或者直接用空格隔开，如<code>李青 OR 一般现在时</code>或者<code>李青 一般现在时</code></li>
						  <li>查询固定数目的单词，只知道前几个单词，可使用?来代替不知道的单词，如<code>李?</code>查询任意两个字并且以李开头的</li>
						  <li>只知道前几个单词，后面的词数目不定，可使用*来替代，如<code>李*</code>，既能查出李青又能查出李长春</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	$(function() {
		document.onkeydown = function(e) {
			var ev = document.all ? window.event : e;
			if (ev.keyCode == 13) {
				formSubmit(1);
			}
		}
	});

	$(function() {
		var options = {
			bootstrapMajorVersion : 3,
			currentPage : '${currentPage}',
			numberOfPages : 10,
			totalPages : '${totalPages}',
			pageUrl : function(type, page, current) {
				return "javascript:formSubmit('" + page + "');";
			}
		}
		$('#pager').bootstrapPaginator(options);
	});

	function formSubmit(currentPage) {
		$("#currentPage").val(currentPage);
		$('#searchForm').submit();
	}

	function download(path) {
		$("#downloadFrame").attr("src", ("download?path=" + encodeURI(path)));
	}
</script>
</html>